<template>
  <div class="app-container">
    <el-form
      :model="form"
      ref="form"
      label-width="200px"
      v-loading="formLoading"
      :rules="rules"
    >
      <el-form-item label="手机号：" prop="user.userName" required>
        <el-input v-model="form.user.userName"></el-input>
      </el-form-item>
      <el-form-item label="密码：">
        <el-input v-model="form.user.password" type="password"></el-input>
      </el-form-item>
      <el-form-item label="真实姓名：" prop="user.realName" required>
        <el-input v-model="form.user.realName"></el-input>
      </el-form-item>
      <el-form-item label="人员类别：" prop="departmentId">
        <el-tree-select
          v-model="form.user.departmentId"
          :data="departmentTree"
          check-strictly
          :render-after-expand="true"
          default-expand-all
          placeholder="人员类别"
        />
      </el-form-item>
      <el-form-item label="头像：" prop="imagePath">
        <el-upload
          class="upload"
          action="/api/upload/folder/file"
          accept=".jpg,.png"
          :data="{ folder: 'profile' }"
          :show-file-list="false"
          :on-progress="uploadProgress"
          :on-success="uploadSuccess"
          :on-error="uploadError"
        >
          <el-avatar
            :size="100"
            :src="form.user.imagePath"
            shape="circle"
            fit="scale-down"
            class="user-image"
            >暂无头像
          </el-avatar>
        </el-upload>
      </el-form-item>
      <el-form-item label="职位：" prop="jobTitle">
        <el-input v-model="form.user.jobTitle"></el-input>
      </el-form-item>
      <el-form-item label="工号：" prop="workNo">
        <el-input v-model="form.user.workNo"></el-input>
      </el-form-item>
      <el-form-item label="身份证号：" prop="user.idCard">
        <el-input v-model="form.user.idCard"></el-input>
      </el-form-item>
      <el-form-item label="年龄：" prop="user.age">
        <el-input v-model.number="form.user.age"></el-input>
      </el-form-item>
      <el-form-item label="性别：">
        <el-select v-model="form.user.sex" placeholder="性别" clearable>
          <el-option
            v-for="item in EnumMap.user.sexEnum"
            :key="item.key"
            :value="item.key"
            :label="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="出生日期：">
        <el-date-picker
          v-model="form.user.birthDay"
          value-format="YYYY-MM-DD"
          type="date"
          placeholder="选择日期"
        />
      </el-form-item>
      <!-- <el-form-item label="手机：" prop="phone">
        <el-input v-model="form.user.phone"></el-input>
      </el-form-item> -->
      <el-form-item label="邮箱：" prop="user.email" required>
        <el-input v-model="form.user.email"></el-input>
      </el-form-item>
      <el-form-item label="民族：" prop="userExtend.nation">
        <el-input v-model="form.userExtend.nation"></el-input>
      </el-form-item>
      <el-form-item label="籍贯：" prop="nativePlace">
        <el-input v-model="form.userExtend.nativePlace"></el-input>
      </el-form-item>
      <el-form-item label="健康状况：" prop="health">
        <el-input v-model="form.userExtend.health"></el-input>
      </el-form-item>
      <el-form-item label="政治面貌：" prop="politic">
        <el-input v-model="form.userExtend.politic"></el-input>
      </el-form-item>
      <el-form-item label="入党时间：">
        <el-date-picker
          v-model="form.userExtend.partyTime"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="参加工作时间：">
        <el-date-picker
          v-model="form.userExtend.workTime"
          type="date"
          placeholder="选择日期"
          value-format="YYYY-MM-DD"
        />
      </el-form-item>
      <el-form-item label="全日制教育：" prop="schoolEducation">
        <el-input v-model="form.userExtend.schoolEducation"></el-input>
      </el-form-item>
      <el-form-item
        label="全日制教育毕业院校及专业："
        prop="schoolEducationMajor"
      >
        <el-input v-model="form.userExtend.schoolEducationMajor"></el-input>
      </el-form-item>
      <el-form-item label="在职教育：" prop="jobEducation">
        <el-input v-model="form.userExtend.jobEducation"></el-input>
      </el-form-item>
      <el-form-item label="在职教育毕业院校及专业：" prop="jobEducationMajor">
        <el-input v-model="form.userExtend.jobEducationMajor"></el-input>
      </el-form-item>
      <el-form-item label="工作单位及职务/工种：" prop="workUnitType">
        <el-input v-model="form.userExtend.workUnitType"></el-input>
      </el-form-item>
      <el-form-item label="通信地址及邮编：" prop="mailAddressCode">
        <el-input v-model="form.userExtend.mailAddressCode"></el-input>
      </el-form-item>
      <el-form-item label="状态：" prop="status">
        <el-select v-model="form.user.status" placeholder="状态">
          <el-option
            v-for="item in EnumMap.user.statusEnum"
            :key="item.key"
            :value="item.key"
            :label="item.value"
          ></el-option>
        </el-select>
      </el-form-item>
      <el-form-item label="资料上传：" prop="fileList">
        <UserTabDataUpload
          DictType="user_file_type"
          v-model:fileList="form.fileList"
          :userInfo="form.user"
        ></UserTabDataUpload>
      </el-form-item>
    </el-form>
  </div>
</template>

<script>
import { EnumMap } from '@/api/EnumMap';
import { employeeSelect, employeeEdit } from '@/api/user';
import { tree } from '@/api/department';
import useStore from '@/store';
import UserTabDataUpload from '@/components/UserTabDataUpload/index.vue';
const { tagsView } = useStore();

export default {
  name: 'EmployeeEdit',
  components: { UserTabDataUpload },
  data() {
    return {
      EnumMap: EnumMap,
      form: {
        user: {
          id: null,
          userName: null,
          password: null,
          realName: null,
          idCard: null,
          workNo: null,
          imagePath: null,
          jobTitle: null,
          systemRole: 1,
          status: 1,
          age: null,
          sex: null,
          birthDay: null,
          phone: null,
          email: null,
          departmentId: null
        },
        userExtend: {
          health: null,
          jobEducation: null,
          jobEducationMajor: null,
          jobResume: null,
          mailAddressCode: null,
          nation: null,
          nativePlace: null,
          partyTime: null,
          politic: null,
          schoolEducation: null,
          schoolEducationMajor: null,
          trainAttendance: null,
          trainOpinion: null,
          unitOpinion: null,
          workTime: null,
          workUnitType: null
        }
      },
      departmentTree: [],
      formLoading: false,
      userNameDisable: false,
      rules: {
        'user.userName': [{ required: true, message: '请输入手机号' }],
        'user.idCard': [{ required: true, message: '请输入身份证号' }],
        'user.realName': [
          { required: true, message: '请输入真实姓名' },
          {
            max: 255,
            message: '长度小于255个字符'
          }
        ],
        'user.age': [{ type: 'number', message: '年龄必须为数字值' }],
        'user.email': [{ required: true, message: '请输入邮箱' }]
      }
    };
  },
  created() {
    let id = this.$route.query.id;

    if (id && parseInt(id) !== 0) {
      this.formLoading = true;
      employeeSelect(id)
        .then(re => {
          console.log(re);
          this.form = re.response;
          this.userNameDisable = true;
        })
        .finally(() => {
          this.formLoading = false;
        });
    }

    tree().then(re => {
      this.departmentTree = re.response;
    });
  },
  methods: {
    submitForm() {
      console.log('23123');
      this.$refs.form.validate(valid => {
        if (valid) {
          this.formLoading = true;
          employeeEdit(this.form)
            .then(re => {
              if (re.code === 1) {
                this.$message.success(re.message);
                tagsView.delCurrentView(this).then(() => {
                  this.$router.push('/user/employee/list');
                });
              } else {
                this.$message.error(re.message);
              }
            })
            .finally(() => {
              this.formLoading = false;
            });
        } else {
          return false;
        }
      });
    },
    uploadProgress() {
      this.loading = this.$loading({
        lock: true,
        text: '文件上传中…',
        spinner: 'el-icon-loading',
        background: 'rgba(0, 0, 0, 0.5)'
      });
    },
    uploadSuccess(re, file) {
      console.log(re, '图片');
      this.loading.close();
      if (re.code === 1) {
        this.form.user.imagePath = re.response.path;
      } else {
        this.$message.error(re.message);
      }
    },
    uploadError() {
      this.loading.close();
      this.$message.error('文件上传失败，请检查文件大小或文件格式');
    },
    resetForm() {
      this.form = {
        id: null,
        userName: null,
        password: null,
        realName: null,
        idCard: null,
        workNo: null,
        imagePath: null,
        jobTitle: null,
        systemRole: 1,
        status: 1,
        age: null,
        sex: null,
        birthDay: null,
        phone: null,
        email: null,
        departmentId: null
      };
      this.$refs['form'].resetFields();
    }
  }
};
</script>
